<template>
  <el-dialog class="edit-box" :title="dialog.title" :visible.sync="dialog.visible" append-to-body top="5vh"
             width="600px">
    <el-form class="editInfo" ref="editInfo" :model="editInfo.data" :rules="editInfo.rules" size="small"
             label-width="100px">
      <el-form-item label="撤回原因" prop="auditOpinion">
        <el-input v-model="editInfo.data.auditOpinion" placeholder="请输入撤回原因"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog.visible = false">取消</el-button>
      <el-button type="primary" @click="handleEditSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { debounce } from 'lodash'
  import { backApproveAPI } from '@/api/todo/salary'
  import { drawbackAPI } from '@/api/todo/piaomake'

  export default {
    name: 'SalaryBack',
    mixins: [],
    components: {},
    data() {
      return {
        dialog: {
          status: 'create',
          visible: false, // 是否显示
          title: '审批撤回'
        },
        formParams: { // 编辑需要的参数
          auditOpinion: ''
        },
        editInfo: { // 编辑表单
          id: undefined,
          data: {
            ...this.formParams
          },
          rules: {
            auditOpinion: [
              { required: true, message: '请输入撤回原因', trigger: 'blur' }
            ]
          },
          disabled: false // 处理编辑，某些项禁止编辑
        },
        detailInfo: null
      }
    },
    props: {
      visible: {
        type: [Boolean],
        required: true,
        default: false
      },
      detailData: {
        type: Object,
        default() {
          return null
        }
      }
    },
    computed: {},
    methods: {
      handleEditSubmit: debounce(function() { // 编辑，提交，防抖
        this.$refs['editInfo'].validate((valid) => {
          if (valid) {
            this.backApproveData()
          }
        })
      }, 300),
      async backApproveData() { // 撤回审批
        try {
          let { editInfo, detailData } = this
          let response = await drawbackAPI({
            businessId: detailData.id,
            auditOpinion: editInfo.data.auditOpinion
          })
          let result = response
          if (+result.code === 200) {
            this.dialog.visible = false
            this.$emit('on-init')
          } else {
            this.$notify.error({
              title: '错误',
              message: result.msg || '操作失败！'
            })
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '操作失败!'
          })
        }
      },
      async resetEditData(data = null) { // 重置编辑表单
        // this.dialog.status = data ? 'update' : 'create'
        // this.dialog.title = data ? '编辑' : '添加'
        // this.dialog.visible = true
        this.editInfo.id = undefined
        this.editInfo.disabled = false
        this.editInfo.data = {
          ...this.formParams
        }
      },
      async initEditDialog(data = null) { // 编辑－显示弹出框
        await this.resetEditData(data)
        this.$nextTick(() => {
          this.$refs['editInfo'].clearValidate()
        })
      }
    },
    watch: {
      visible(newVal, oldVal) {
        if (newVal !== this.dialog.visible) {
          this.dialog.visible = newVal
          if (newVal) {
            this.initEditDialog()
          }
        }
      },
      'dialog.visible'(newVal, oldVal) {
        this.$emit('update:visible', newVal)
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .editInfo {
    margin-right: 50px;
  }

  .el-cascader,
  .el-select {
    width: 100%;
  }
</style>
